﻿@page "/tests/utilities/colors";

<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Background Colors</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    Convey meaning through <Code>Background</Code>, a color utility with <Code>Subtle</Code> variants.
                </Paragraph>
            </CardBody>
            <CardBody>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Primary" TextColor="TextColor.White">
                    Primary
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Primary.Subtle" TextColor="TextColor.Primary.Emphasis">
                    Primary Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Secondary" TextColor="TextColor.White">
                    Secondary
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Secondary.Subtle" TextColor="TextColor.Secondary.Emphasis">
                    Secondary Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Success" TextColor="TextColor.White">
                    Success
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Success.Subtle" TextColor="TextColor.Success.Emphasis">
                    Success Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Danger" TextColor="TextColor.White">
                    Danger
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Danger.Subtle" TextColor="TextColor.Danger.Emphasis">
                    Danger Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Warning" TextColor="TextColor.Dark">
                    Warning
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Warning.Subtle" TextColor="TextColor.Warning.Emphasis">
                    Warning Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Info" TextColor="TextColor.Dark">
                    Info
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Info.Subtle" TextColor="TextColor.Info.Emphasis">
                    Info Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Light" TextColor="TextColor.Dark">
                    Light
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Light.Subtle" TextColor="TextColor.Light.Emphasis">
                    Light Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Dark" TextColor="TextColor.White">
                    Dark
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Dark.Subtle" TextColor="TextColor.Dark.Emphasis">
                    Dark Subtle
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Body" TextColor="TextColor.Body">
                    Body
                </Div>
                <Div Padding="Padding.Is3" Margin="Margin.Is2.FromBottom" Background="Background.Body.Subtle" TextColor="TextColor.Body.Emphasis">
                    Body Subtle
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Text Colors</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    Convey meaning through <Code>TextColor</Code>, a color utility with an <Code>Emphasis</Code> variants.
                </Paragraph>
            </CardBody>
            <CardBody>
                <Paragraph TextColor="TextColor.Primary">
                    Primary
                </Paragraph>
                <Paragraph TextColor="TextColor.Primary.Emphasis">
                    Primary Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Secondary">
                    Secondary
                </Paragraph>
                <Paragraph TextColor="TextColor.Secondary.Emphasis">
                    Secondary Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Success">
                    Success
                </Paragraph>
                <Paragraph TextColor="TextColor.Success.Emphasis">
                    Success Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Danger">
                    Danger
                </Paragraph>
                <Paragraph TextColor="TextColor.Danger.Emphasis">
                    Danger Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Warning">
                    Warning
                </Paragraph>
                <Paragraph TextColor="TextColor.Warning.Emphasis">
                    Warning Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Info" Background="Background.Dark">
                    Info
                </Paragraph>
                <Paragraph TextColor="TextColor.Info.Emphasis">
                    Info Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Light">
                    Light
                </Paragraph>
                <Paragraph TextColor="TextColor.Light.Emphasis" Background="Background.Dark">
                    Light Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Dark">
                    Dark
                </Paragraph>
                <Paragraph TextColor="TextColor.Dark.Emphasis">
                    Dark Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Body">
                    Body
                </Paragraph>
                <Paragraph TextColor="TextColor.Body.Emphasis">
                    Body Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Muted">
                    Muted
                </Paragraph>
                <Paragraph TextColor="TextColor.Muted.Emphasis">
                    Muted Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.White" Background="Background.Dark">
                    White
                </Paragraph>
                <Paragraph TextColor="TextColor.White.Emphasis">
                    White Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.Black50">
                    Black50
                </Paragraph>
                <Paragraph TextColor="TextColor.Black50.Emphasis">
                    Black50 Emphasis
                </Paragraph>
                <Paragraph TextColor="TextColor.White50" Background="Background.Dark">
                    White50
                </Paragraph>
                <Paragraph TextColor="TextColor.White50.Emphasis">
                    White50 Emphasis
                </Paragraph>
            </CardBody>
        </Card>
    </Column>
</Row>